<template>
  <div id="container">
    <MyTable :arr="list"></MyTable>
    <MyTable :arr="list">
      <a :href="obj.headImgUrl" :slot="index" v-for="(obj,index) in list">{{obj.headImgUrl}}</a>
    </MyTable>
    <MyTable :arr="list">
        <img :src="obj.headImgUrl" :slot="index" v-for="(obj,index) in list"></img>
    </MyTable>


    <MyTable1 :arr="list">
      <template v-slot="{obj}" >
        <a :href="obj.headImgUrl"  >{{obj.headImgUrl}} </a>
      </template>
    </MyTable1>
    <MyTable1 :arr="list">
<template v-slot="scope">
  <img style="width: 100px" :src="scope.obj.headImgUrl" ></img>
</template>
    </MyTable1>
    <MyTable2 :arr="list">
      <template v-slot="scope">
      <h1>{{scope.obj}}</h1>
      </template>
    </MyTable2>

    <MyTable2 :arr="list">
      <template v-slot="scope">
        <h1>{{scope.arr}}</h1>
      </template>
    </MyTable2>
  </div>
</template>

<script>
import MyTable from "@/components/06/MyTable.vue";
import MyTable1 from "@/components/06/MyTable1.vue";
import MyTable2 from "@/components/06/MyTable2.vue";

export default {
  data(){
    return {
      list:[
        {
          name: "小传同学",
          age: 18,
          headImgUrl:
              "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",
        },
        {
          name: "小黑同学",
          age: 25,
          headImgUrl:
              "http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",
        },
        {
          name: "智慧同学",
          age: 21,
          headImgUrl:
              "http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",
        },
      ],
    }
  },
  computed:{
    num(){
      return this.list.length
    }
  },
  components: {
    MyTable,
    MyTable1,
    MyTable2
  },
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>